Перейти к основному содержимому

1.03. Тест на готовность к веб-разработке

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВ
Всем

Тест на готовность к веб-разработке​

1: Основы сети​

Часть A: Вопросы​

  1. Что такое доменное имя и зачем оно нужно?
  2. Какую роль выполняет DNS-система в работе интернета?
  3. Чем отличается веб-хостинг от доменного имени?
  4. Что происходит, когда пользователь вводит URL в адресную строку браузера?
  5. Какие основные компоненты содержит URL?
  6. Что такое IP-адрес и как он связан с доменом?
  7. Зачем нужен веб-сервер?
  8. Что означает статус-код HTTP 200?
  9. Какой HTTP-метод используется для отправки данных формы на сервер?
  10. Что такое клиент-серверная архитектура?

Часть B: Практические задачи​

Задача 1.
Пользователь не может открыть сайт example.com. Сайт работает у других, но у него — ошибка «DNS_PROBE_FINISHED_NXDOMAIN». Объясните возможную причину и предложите два способа диагностики.

Задача 2.
Вы разместили HTML-файл на хостинге, но при открытии страницы браузер показывает список файлов вместо содержимого сайта. Почему так происходит и как это исправить?

Задача 3.
Сервер возвращает статус 404 при запросе к /api/users, хотя маршрут реализован. Предложите три возможные причины и способы их проверки.

Ответы​

Часть A: Ответы на вопросы​

  1. Доменное имя — это человекочитаемый адрес сайта (например, spizen.ru), который заменяет числовой IP-адрес. Оно нужно для удобства: запомнить имя проще, чем цифры.
  2. DNS (Domain Name System) преобразует доменные имена в IP-адреса, чтобы браузер мог найти нужный сервер. Без DNS пришлось бы вводить IP-адреса вручную.
  3. Домен — это адрес сайта; хостинг — это место (сервер), где хранятся файлы сайта. Домен указывает, куда идти, хостинг — что там лежит.
  4. Браузер отправляет DNS-запрос, получает IP-адрес, устанавливает TCP-соединение, отправляет HTTP-запрос, получает ответ и отображает страницу.
  5. URL состоит из: протокола (https://), домена (spizen.ru), порта (необязательно, по умолчанию 443 для HTTPS), пути (/guide/web), параметров (?id=123) и якоря (#section).
  6. IP-адрес — уникальный числовой идентификатор устройства в сети. Домен связан с IP через DNS-запись (обычно типа A или AAAA).
  7. Веб-сервер принимает HTTP-запросы от клиентов и возвращает ответы — HTML-страницы, изображения, JSON и т.д. Примеры: Nginx, Apache, IIS.
  8. HTTP 200 означает, что запрос успешно обработан и ресурс передан клиенту.
  9. Для отправки данных формы обычно используется метод POST (иногда PUT или PATCH — в зависимости от операции).
  10. Клиент-серверная архитектура — модель взаимодействия, где клиент (браузер) запрашивает данные, а сервер их предоставляет. Клиент инициирует соединение, сервер отвечает.

Часть B: Решения задач​

Задача 1.
Ошибка DNS_PROBE_FINISHED_NXDOMAIN означает, что DNS-сервер не смог найти запись для домена. Возможные причины:

  • Локальный DNS-кэш повреждён.
  • Провайдер использует неработающий DNS.

Диагностика:

  1. Выполнить nslookup example.com или dig example.com в терминале — если не возвращает IP, проблема в DNS.
  2. Попробовать открыть сайт через другой DNS (например, Google DNS 8.8.8.8 или Cloudflare 1.1.1.1).

Задача 2.
Сервер не находит индексный файл (обычно index.html). По умолчанию веб-сервер ищет файлы с определёнными именами (index.html, default.htm и т.п.). Если такого файла нет, он показывает список содержимого каталога (если разрешено).

Решение:

  • Переименовать HTML-файл в index.html.
  • Или настроить веб-сервер, чтобы он использовал ваш файл как индексный (например, в Nginx: index mypage.html;).

Задача 3.
Возможные причины ошибки 404 для /api/users:

  1. Маршрут зарегистрирован с другим путём (например, /api/v1/users).
  2. Сервер не перезагружен после добавления маршрута (актуально для Node.js без hot-reload).
  3. Запрос идёт на неверный хост или порт (например, фронтенд отправляет запрос на localhost:3000, а бэкенд слушает localhost:8080).

Проверка:

  • Убедиться, что путь в коде совпадает с запрашиваемым.
  • Посмотреть логи сервера — обрабатывается ли запрос вообще.
  • Использовать curl или Postman для прямого вызова эндпоинта и исключения ошибок на стороне фронтенда.

2: Веб-приложение, веб-сервер, бэкенд и фронтенд​

Часть A: Вопросы​

  1. Что такое веб-приложение и чем оно отличается от статического сайта?
  2. Какие задачи обычно решает фронтенд?
  3. Какие задачи обычно решает бэкенд?
  4. Что такое API и зачем оно нужно во взаимодействии фронтенда и бэкенда?
  5. Может ли одно и то же приложение одновременно содержать фронтенд и бэкенд?
  6. Что такое SSR (Server-Side Rendering) и как он отличается от CSR (Client-Side Rendering)?
  7. Зачем фронтенду нужен HTTP-клиент (например, fetch или axios)?
  8. Какие данные обычно хранятся на стороне бэкенда, а не передаются фронтенду?
  9. Что происходит, когда фронтенд отправляет запрос к бэкенду через API?
  10. Почему важно разделять логику фронтенда и бэкенда?

Часть B: Практические задачи​

Задача 1.
Вы разрабатываете приложение для заметок. Пользователь создаёт заметку в интерфейсе, но она не сохраняется после перезагрузки страницы. Предложите архитектурное решение и опишите минимальный набор компонентов на фронтенде и бэкенде.

Задача 2.
Фронтенд отправляет POST-запрос на /api/login, но получает ошибку CORS. Объясните, почему это происходит и как исправить настройки на стороне бэкенда.

Задача 3.
Ваше приложение работает локально (localhost:3000), но после развёртывания на хостинге фронтенд не может подключиться к бэкенду. Назовите три возможные причины и способы их устранения.

Ответы​

Часть A: Ответы на вопросы​

  1. Веб-приложение — это интерактивный сайт, который обрабатывает пользовательские действия, взаимодействует с сервером и динамически обновляет контент. В отличие от статического сайта, его содержимое формируется на основе данных и логики, а не просто отдаётся как готовый HTML.
  2. Фронтенд отвечает за отображение интерфейса, взаимодействие с пользователем, валидацию ввода, навигацию и запросы к бэкенду. Он работает в браузере и использует HTML, CSS и JavaScript.
  3. Бэкенд обрабатывает бизнес-логику, управляет базой данных, авторизацией, безопасностью, файлами и API. Он работает на сервере и скрыт от пользователя.
  4. API (Application Programming Interface) — это набор правил и эндпоинтов, через которые фронтенд запрашивает данные или команды у бэкенда. Он обеспечивает чёткое и стандартизированное взаимодействие.
  5. Да, одно приложение может содержать и фронтенд, и бэкенд. Например, Express.js-сервер может отдавать HTML-страницы (фронтенд) и одновременно обрабатывать API-запросы (бэкенд).
  6. SSR (Server-Side Rendering) — рендеринг HTML на сервере перед отправкой клиенту. CSR (Client-Side Rendering) — рендеринг происходит в браузере с помощью JavaScript. SSR лучше для SEO и первой загрузки, CSR — для интерактивности после загрузки.
  7. HTTP-клиент позволяет фронтенду отправлять запросы к бэкенду (получать данные, отправлять формы, авторизоваться и т.д.). Без него фронтенд не мог бы взаимодействовать с сервером.
  8. На бэкенде хранятся конфиденциальные данные: пароли (в хэшированном виде), ключи API, данные пользователей, логика авторизации, настройки сервера, доступ к базе данных.
  9. Фронтенд формирует HTTP-запрос (с методом, заголовками, телом), отправляет его на указанный URL. Бэкенд принимает запрос, обрабатывает его (например, проверяет права, читает БД), формирует ответ и отправляет его обратно. Фронтенд получает ответ и обновляет интерфейс.
  10. Разделение упрощает разработку, тестирование, масштабирование и поддержку. Команды могут работать независимо, технологии можно менять по отдельности, а безопасность повышается за счёт изоляции чувствительной логики.

Часть B: Решения задач​

Задача 1.
Архитектурное решение: использовать бэкенд с базой данных для хранения заметок.

  • Фронтенд: форма ввода, кнопка «Сохранить», список заметок, вызов fetch('/api/notes', { method: 'POST', body: ... }).
  • Бэкенд: маршрут /api/notes (POST для создания, GET для получения), подключение к БД (например, SQLite или PostgreSQL), модель заметки (id, текст, дата).

Без бэкенда данные теряются при перезагрузке, так как localStorage или sessionStorage — временное хранилище.

Задача 2.
Ошибка CORS возникает, потому что браузер блокирует запросы с одного origin на другой, если сервер не разрешает такие запросы явно.

Исправление на бэкенде: добавить заголовки:

  • Access-Control-Allow-Origin: https://ваш-фронтенд.домен (или * для разработки)
  • Access-Control-Allow-Methods: POST, GET, OPTIONS
  • Access-Control-Allow-Headers: Content-Type

В Express.js это делается через middleware, например, пакет cors.

Задача 3.
Возможные причины:

  1. Неверный URL бэкенда в коде фронтенда (например, остался http://localhost:5000).
    → Использовать относительный путь или переменную окружения.
  2. Бэкенд не развёрнут или не запущен на сервере.
    → Убедиться, что бэкенд работает и слушает публичный адрес.
  3. Брандмауэр или CORS блокируют запрос.
    → Настроить CORS на бэкенде и проверить, открыт ли порт (например, 80/443 или 3001).

Дополнительно: убедиться, что используется HTTPS, если фронтенд на HTTPS (браузер блокирует смешанный контент).

3: HTML​

Часть A: Вопросы​

  1. Что такое HTML и какова его основная роль в веб-разработке?
  2. Из чего состоит HTML-элемент?
  3. Зачем нужны семантические теги (<header>, <nav>, <main>, <article> и т.д.)?
  4. Чем отличается блочный элемент от строчного?
  5. Для чего используется тег <meta> в <head>?
  6. Как правильно подключить внешнюю таблицу стилей CSS к HTML-документу?
  7. Зачем нужен атрибут alt у тега <img>?
  8. Какие теги используются для создания гиперссылок и как указать, что ссылка открывается в новой вкладке?
  9. Что такое форма (<form>) и какие основные атрибуты она имеет?
  10. Почему важно соблюдать правильную вложенность тегов и закрывать все элементы?

Часть B: Практические задачи​

Задача 1.
Создайте разметку для простой статьи с заголовком, автором, датой публикации, основным текстом и блоком навигации вверху страницы. Используйте только семантические HTML5-теги.

Задача 2.
У вас есть форма входа с полями «Email» и «Пароль», кнопкой «Войти» и ссылкой «Забыли пароль?». Напишите корректную HTML-разметку с учётом доступности (accessibility).

Задача 3.
На странице отображаются изображения товаров, но при медленном интернете пользователи не понимают, что должно быть на месте картинок. Как улучшить UX с помощью HTML?

Ответы​

Часть A: Ответы на вопросы​

  1. HTML (HyperText Markup Language) — язык разметки, описывающий структуру веб-страницы. Он определяет, где находятся заголовки, абзацы, изображения, формы и другие элементы.
  2. HTML-элемент состоит из открывающего тега, содержимого и закрывающего тега (например, <p>Текст</p>). У некоторых элементов (например, <img>) закрывающего тега нет — они самозакрывающиеся.
  3. Семантические теги передают смысл структуры страницы, а не только её внешний вид. Это помогает поисковым системам, скринридерам и разработчикам понимать назначение каждого блока.
  4. Блочные элементы (<div>, <p>, <h1>) занимают всю ширину строки и начинаются с новой строки. Строчные элементы (<span>, <a>, <strong>) занимают только необходимое место и не переносятся на новую строку.
  5. Тег <meta> задаёт метаданные: кодировку (charset="UTF-8"), описание страницы, ключевые слова, настройки viewport для мобильных устройств и другие инструкции для браузера или поисковиков.
  6. Подключить CSS можно через тег <link> внутри <head>: 
    <link rel="stylesheet" href="styles.css">
  7. Атрибут alt содержит альтернативный текст, который отображается, если изображение не загрузилось, или зачитывается скринридером. Это критически важно для доступности и SEO.
  8. Гиперссылки создаются тегом <a> с атрибутом href. Чтобы открыть ссылку в новой вкладке, добавляют target="_blank" и rel="noopener" для безопасности: 
    <a href="https://example.com" target="_blank" rel="noopener">Сайт</a>
  9. Тег <form> группирует элементы ввода. Основные атрибуты:
    • action — URL для отправки данных,
    • method — HTTP-метод (GET или POST),
    • enctype — формат кодирования (например, для загрузки файлов).
  10. Правильная вложенность и закрытие тегов обеспечивают предсказуемый рендеринг, совместимость между браузерами и корректную работу скринридеров. Нарушения могут привести к "сломанной" разметке.

Часть B: Решения задач​

Задача 1.
Пример семантической разметки:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Статья</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Как работает DNS</h1>
        <p>Автор: Алексей Петров | Опубликовано: 14 января 2026</p>
      </header>
      <p>DNS — это система, которая преобразует доменные имена...</p>
    </article>
  </main>
</body>
</html>

Задача 2.
Форма с учётом доступности:

<form action="/login" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Войти</button>
  <a href="/forgot-password">Забыли пароль?</a>
</form>

Использованы:

  • <label> с for, связанный с id поля,
  • правильные типы email и password,
  • атрибут required для обязательных полей.

Задача 3.
Улучшение UX:

  • Добавить осмысленный alt для каждого <img>, например: 
    <img src="product1.jpg" alt="Красные кроссовки Nike Air Max, размер 42">
  • При необходимости использовать loading="lazy" для отложенной загрузки.
  • Можно добавить placeholder через CSS или обёртку с фоном, но основное — качественный alt.

4: CSS​

Часть A: Вопросы​

  1. Что такое CSS и какова его роль в веб-разработке?
  2. Какие существуют способы подключения CSS к HTML-документу?
  3. Что такое каскад в CSS и как он влияет на применение стилей?
  4. Объясните разницу между margin, border и padding.
  5. Что такое блочная модель (box model) и как она работает?
  6. Зачем нужны медиазапросы (@media) и как они используются?
  7. В чём преимущество использования Flexbox перед традиционными методами позиционирования?
  8. Что делает свойство position и какие у него основные значения?
  9. Как правильно организовать структуру CSS-файлов в крупном проекте?
  10. Почему важно избегать избыточного использования !important?

Часть B: Практические задачи​

Задача 1.
Создайте адаптивную карточку товара: изображение сверху, заголовок, цена и кнопка «В корзину» под ним. На мобильных — один столбец, на планшетах — два карточки в ряд, на десктопах — три. Используйте только HTML и CSS (без фреймворков).

Задача 2.
У вас есть горизонтальное меню навигации. При уменьшении ширины экрана элементы начинают перекрываться. Предложите решение с использованием Flexbox и медиазапроса для мобильного отображения (например, вертикальное меню или скрытие под гамбургер-иконку — опишите оба подхода).

Задача 3.
Элемент с классом .panel должен занимать 80% ширины родителя, иметь внутренний отступ 20px, границу 2px сплошную и внешний отступ 10px со всех сторон. Напишите корректное CSS-правило, учитывающее box-sizing.

Ответы​

Часть A: Ответы на вопросы​

  1. CSS (Cascading Style Sheets) — язык стилей, управляющий внешним видом HTML-элементов: цветом, шрифтами, отступами, позиционированием, анимациями и адаптивностью.
  2. Три способа подключения:
    • Внешний файл через <link rel="stylesheet" href="..."> (рекомендуется),
    • Внутренний стиль в теге <style> внутри <head>,
    • Инлайн-стили через атрибут style (не рекомендуется для повторяющихся стилей).
  3. Каскад определяет, какой стиль применяется, когда несколько правил конфликтуют. Приоритет зависит от: специфичности селектора, порядка объявления и наличия !important.
    • margin — внешний отступ (прозрачный, за пределами границы),
    • border — рамка вокруг содержимого и padding,
    • padding — внутренний отступ между содержимым и границей.
  5. Блочная модель описывает каждый элемент как прямоугольник, состоящий из: содержимого → padding → border → margin. Ширина по умолчанию (content-box) не включает padding и border; box-sizing: border-box включает их в указанную ширину.
  6. Медиазапросы позволяют применять стили при определённых условиях (ширина экрана, ориентация и т.д.). Используются для создания адаптивных макетов: 
    @media (max-width: 768px) { /* мобильные стили */ }
  7. Flexbox упрощает создание одномерных макетов (по строке или колонке), автоматически распределяя пространство, выравнивая элементы и адаптируя их размер без float или абсолютного позиционирования.
  8. Свойство position управляет способом позиционирования элемента:
    • static — по умолчанию,
    • relative — смещение относительно обычного положения,
    • absolute — позиционирование относительно ближайшего позиционированного предка,
    • fixed — относительно окна просмотра,
    • sticky — комбинация relative + fixed при прокрутке.
  9. В крупном проекте CSS организуют по компонентам или слоям:
    • Базовые стили (reset/normalize),
    • Компоненты (кнопки, карточки),
    • Макеты (header, grid),
    • Утилиты (вспомогательные классы),
    • Темы или переменные (через CSS Custom Properties).
      Подходы: BEM, ITCSS, SMACSS.
  10. !important нарушает естественный каскад, затрудняет отладку и переиспользование стилей. Его использование усложняет поддержку и приводит к "войне специфичностей".

Часть B: Решения задач​

Задача 1.
HTML:

<div class="product-grid">
  <div class="product-card">
    <img src="shoes.jpg" alt="Кроссовки">
    <h3>Кроссовки</h3>
    <p class="price">5 990 ₽</p>
    <button>В корзину</button>
  </div>
  <!-- ещё карточки -->
</div>

CSS:

.product-grid {
  display: grid;
  gap: 20px;
  padding: 20px;
}

/* Мобильные */
.product-grid {
  grid-template-columns: 1fr;
}

/* Планшеты */
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Десктопы */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card img {
  width: 100%;
  height: auto;
}

Задача 2.
Подход 1 (Flexbox + медиазапрос):

.nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 600px) {
  .nav {
    flex-direction: column;
  }
}

Подход 2 (гамбургер-меню):
— Скрыть .nav на мобильных (display: none),
— Показать кнопку с тремя полосками,
— При клике переключать класс (через JavaScript) для отображения меню.
(Полная реализация требует JS, но в рамках CSS можно описать состояние :checked с checkbox-hack.)

Задача 3.
CSS:

.panel {
  box-sizing: border-box;
  width: 80%;
  padding: 20px;
  border: 2px solid;
  margin: 10px;
}

Без box-sizing: border-box ширина составила бы 80% + 2*20px + 2*2px, что нарушает макет.

5: JavaScript​

Часть A: Вопросы​

  1. Какова роль JavaScript в современной веб-разработке?
  2. Что такое DOM и как JavaScript с ним взаимодействует?
  3. Как подключить внешний JavaScript-файл к HTML-документу?
  4. В чём разница между let, const и var при объявлении переменных?
  5. Что такое функция и зачем она нужна?
  6. Как зарегистрировать обработчик события на элементе страницы?
  7. Что делает метод fetch() и для чего он используется?
  8. Как получить элемент по его идентификатору (id) с помощью JavaScript?
  9. Что происходит при выполнении скрипта, если он помещён в <head> без атрибута defer или async?
  10. Зачем нужно ожидать полной загрузки DOM перед выполнением скриптов?

Часть B: Практические задачи​

Задача 1.
На странице есть кнопка с id="toggle", и блок с id="content". При первом клике по кнопке блок должен появиться, при втором — скрыться. Напишите JavaScript-код, реализующий это поведение.

Задача 2.
Пользователь вводит URL изображения в поле <input id="img-url"> и нажимает кнопку. Скрипт должен создать элемент <img> с этим URL и добавить его в контейнер <div id="gallery">. Обеспечьте базовую проверку корректности ввода.

Задача 3.
Вы отправляете GET-запрос к API /api/status и хотите вывести результат в элемент с id="status". Напишите код с использованием fetch(), обработкой успешного ответа и ошибки.

Ответы​

Часть A: Ответы на вопросы​

  1. JavaScript добавляет интерактивность веб-страницам: реагирует на действия пользователя, изменяет содержимое без перезагрузки, отправляет запросы на сервер, управляет анимациями и валидацией форм.
  2. DOM (Document Object Model) — древовидное представление HTML-документа в памяти браузера. JavaScript читает, изменяет, создаёт и удаляет узлы DOM, тем самым обновляя отображение страницы.
  3. Подключить JS-файл можно через тег <script>: 
    <script src="app.js"></script>
    Рекомендуется размещать перед закрывающим </body>, либо использовать defer в <head>.
    • var — устаревший способ, имеет функциональную область видимости и подвержен hoisting,
    • let — блочная область видимости, значение можно менять,
    • const — блочная область видимости, значение нельзя переназначить (но свойства объекта можно менять).
  5. Функция — именованный блок кода, который можно вызывать многократно. Она инкапсулирует логику, упрощает чтение, тестирование и повторное использование.
  6. Обработчик события можно зарегистрировать через:
    • element.addEventListener('click', handler),
    • или присвоение свойства: element.onclick = handler (менее гибкий способ).
  7. Метод fetch() выполняет HTTP-запросы к серверу (обычно к API). Он возвращает промис, который разрешается в объект Response, содержащий данные (часто в формате JSON).
  8. Получить элемент по id можно с помощью: 
    const el = document.getElementById('myId');
  9. Если скрипт в <head> без defer/async, браузер останавливает парсинг HTML, загружает и выполняет скрипт немедленно. Это может вызвать ошибки, если скрипт пытается обратиться к элементам, которые ещё не созданы.
  10. DOM может быть ещё не построен, когда скрипт запускается. Ожидание гарантирует, что все элементы доступны для манипуляций. Это достигается через DOMContentLoaded или размещение скрипта внизу страницы.

Часть B: Решения задач​

Задача 1.

const button = document.getElementById('toggle');
const content = document.getElementById('content');

button.addEventListener('click', () => {
  if (content.style.display === 'none') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
});

Альтернатива — использовать класс и CSS:

.hidden { display: none; }
button.addEventListener('click', () => {
  content.classList.toggle('hidden');
});

(Этот подход предпочтительнее, так как стили управляются через CSS.)

Задача 2.

document.getElementById('add-img').addEventListener('click', () => {
  const url = document.getElementById('img-url').value.trim();
  if (!url) {
    alert('Введите URL изображения');
    return;
  }

  const img = document.createElement('img');
  img.src = url;
  img.alt = 'Добавленное изображение';
  img.style.maxWidth = '100%';

  document.getElementById('gallery').appendChild(img);
});

(Предполагается, что кнопка имеет id="add-img".)

Задача 3.

fetch('/api/status')
  .then(response => {
    if (!response.ok) {
      throw new Error('Сервер вернул ошибку');
    }
    return response.text(); // или .json(), если ответ в JSON
  })
  .then(data => {
    document.getElementById('status').textContent = data;
  })
  .catch(error => {
    document.getElementById('status').textContent = 'Ошибка: ' + error.message;
  });